<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"  
		xmlns:h="http://java.sun.com/jsf/html"  
		xmlns:f="http://java.sun.com/jsf/core"
		xmlns:ui="http://java.sun.com/jsf/facelets"
		xmlns:c="http://java.sun.com/jsp/jstl/core"
        xmlns:a4j="http://richfaces.org/a4j"
        xmlns:rich="http://richfaces.org/rich">  

    <h:body>
        <div class="center">                
            <h:form id="formSearch" class="form-search" style="color: black;">
                <h:selectOneMenu id="category" class="validate[required]  doTooltip" value="#{bookManager.category}" title="Vous pouvez sélectionner une catégorie pour restreindre votre recherche.">
                    <f:selectItems value="#{bookManager.categories}"></f:selectItems>
                </h:selectOneMenu> 
                
                <div class="input-append">
                    <h:inputText id="search" value="#{bookManager.searchString}" class="validate[required, minSize[3]] searchPopover" maxlength="50" required="true" tabindex="0"></h:inputText>
                    <div class="input-append">
                        <h:commandButton action="#{bookManager.findBooks()}" class="btn btn-primary" value="Rechercher"></h:commandButton>
                    </div>
                  </div>
            </h:form>
        </div>
        <script type="text/javascript">
            var form = "#formSearch";

            // Load validationEngine for check in real time the user entries.
            $j(form).validationEngine('attach');
            
            $j('.searchPopover').popover({
                trigger: 'hover',
                placement: 'bottom',
                title: "Informations",
                content: "Les mots clés seront utilisés pour rechercher dans:\n\
                            &lt;ul class='marginLeftList'>\n\
                                    &lt;li>\n\
                                        Auteurs\n\
                                    &lt;/li>\n\
                                    &lt;li>\n\
                                        Sommaires\n\
                                    &lt;/li>\n\
                                    &lt;li>\n\
                                        Tables des matières\n\
                                    &lt;/li>\n\
                            &lt;/ul>"
            });
            
        </script>
    </h:body>
</html>

